<template>
  <div class="login-page">
    <div class="left">
      <div class="leftText">
        <h1>格凡安信管理平台</h1>
        <p>Copyright 2021 格凡安信科技有限公司 版权所有</p>
      </div>
    </div>

    <div class="right">
      <!--   status-icon属性为输入框添加了表示校验结果的反馈图标。就是input后面的小x   -->
      <el-form status-icon :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <h2>登录</h2>
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" placeholder="账号"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="ruleForm.password" placeholder="密码"/>
        </el-form-item>
        <el-form-item prop="captcha">
          <div class="captcha">
            <el-input v-model="ruleForm.captcha" placeholder="验证码"/>
            <img :src="url" alt="" @click="getCaptcha">
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<!--登录接口  /login   post-->
<!--'username':用户名,-->
<!--'password': 密码, //需要使用md5加密-->
<!--'uuid': uuid,-->
<!--'captcha': 验证码-->

<!--退出登录   /logout  post-->

<!--config.headers['gaff-token'] = token-->

<!--修改密码   /sys/user/password   post-->
<!--'password': this.$md5(this.form.password),-->
<!--'newPassword': this.$md5(this.form.newPassword)-->


<script>
import {getUUID} from '@/utils'
//全局接口
import {loginApi} from "@/http";
import md5 from 'js-md5'

console.log(md5)
export default {
  name: 'login-page',
  props: {},
  components: {},
  data: function () {
    return {
      url: undefined,//必须显示的声明，不然不能实时渲染出来
      ruleForm: {},
      rules: {
        username: [{required: true, message: '账号不能为空', trigger: 'blur'},],
        password: [{required: true, message: '密码不能为空', trigger: 'blur'},],
        captcha: [{required: true, message: '验证码不能为空', trigger: 'blur'},],

      },
    }
  },
  created() {
    this.getCaptcha()
  },
  computed:{
  },
  methods: {
    successBox(msg) {
      this.$message({
        message: msg,
        type: 'success',
        userInfo:{},
      });
    },
    warningBox(msg) {
      this.$message.error(msg);
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.ruleForm); //拷贝
          params.password = md5(params.password);
          // console.log(params)//就是存储用户信息的ruleForm
          loginApi(params).then(res => {
            if (res.code === 200) {
              this.successBox('登录成功')
              console.log('res:',res)
              //登录成功后把所登录的用户信息存在sessionStorage
              sessionStorage.setItem('userInfo', JSON.stringify(res.data.userInfo));//转成json字符

              //登录成功后把登录状态的信息存在sessionStorage
              sessionStorage.setItem('token', res.data.token);
              //把路由存在缓存,转成字符串
              sessionStorage.setItem('menus', JSON.stringify(res.data.userInfo.menus));
              //跳转
              this.$router.push('/')
            } else {
              this.getCaptcha()
              this.warningBox(res.msg);
            }
          })


        } else {
          this.warningBox('信息未填完');
          return false;
        }
      });
    },
    getCaptcha() {
      this.ruleForm.uuid = getUUID()
      this.url = 'http://123.207.219.13:38080//captcha.jpg?uuid=' + this.ruleForm.uuid
    },
  },
}
</script>

<style scoped lang="less">
.login-page {
  display: flex;
  height: 100vh;
  min-width: 1200px;
  background: url("@/assets/images/bg.jpg") no-repeat;
  background-size: cover;

  .left {
    flex-grow: 1;
    background-color: rgba(47, 48, 49, .6);
    color: white;

    .leftText {
      margin-top: 200px;
      margin-left: 150px;

      h1 {
        font-size: 50px;
        font-weight: 400;
        margin-bottom: 10px;
      }

      p {
        font-size: 14px;
        color: rgba(255, 255, 255, .5);;
      }
    }

  }

  .right {
    width: 470px;
    //background-color: white;
    display: flex;
    justify-content: center;
    padding-top: 200px;
    background-color: #fff;

    h2 {
      text-align: center;
    }

    .el-form {
      width: 350px;

      .el-form-item {
        //background-color: #9a6e3a;
        padding-top: 15px;
      }

      .el-button {
        margin-top: 30px;
        width: 350px;
      }

      .el-form-item .captcha {
        //background-color: red;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-input {
          width: 200px;
        }

        img {
          height: 38px;
          width: 120px;
          cursor: pointer;
        }

      }
    }


  }
}


</style>

